<template>
	<view class="content">
		<u-navbar :is-back="false" :title="navbarTitle"  :background="{ background: '#f1f1f1'  }"  >
			<!-- <view class="slot-wrap-full">
				<view class="" 
					:style="plat=='ios'?'width: 100%;margin-left: 70rpx;':'width: 100%;margin-left: 70rpx;padding-left:20rpx;'">
					 <view v-if="dataLoading==false" 
						style="font-size: 34rpx;font-weight: bold;color: #404133;text-align: center;">
						{{navbarTitle}}
					 </view>
					 <view v-else class="u-flex u-row-center u-col-center">
						 <view class="u-m-r-10">
							 <u-loading mode="circle" color="#19be6b"></u-loading>
						 </view> 
						 <view style="font-size: 34rpx;font-weight: bold;color: #404133;text-align: center;">收取中</view>
					 </view>
				</view>
			</view> -->
			<view
					class="u-flex u-row-around u-col-center  u-p-20"
					slot="right" >
				<view class="u-m-r-20">
					<u-icon class="u-clear-icon" @click="toSearch()"  
							:size="46" name="search" color="#606266"></u-icon>
				</view>
				<view>
					<u-icon name="plus-circle" :size="46" color="#606266" @click="showSelect"></u-icon>
				</view>
			</view>	
		</u-navbar>
		<selectInput :list="selectList" :list-key="'name'" :show.sync="selectShow" @on-select="checkSelect" @close="closeSelect" />

		<scroll-view  :scroll-x="false" :scroll-y="true"  :refresher-triggered="refresherTriggered" :refresher-enabled="true"
					  :style="'height:'+scrollViewHeight+'px'" class="hidden-scroll-bar" @refresherrefresh="$u.refreshContactList();getMyChatGroupList(true)">	
			<!-- <template v-if="plat=='ios'">
				<view class="u-flex u-row-center u-col-center u-m-16" @click="toSearch()"
						style="background-color: #FFFFFF;height: 80rpx;border-radius: 4rpx;color: #c0c0c0;">
					<view class="u-m-r-20">
							<u-icon class="u-clear-icon" top="6rpx"  :size="40" name="search" color="#c0c0c0"></u-icon>
					</view>
					<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
				</view>
			</template> -->
		<!-- 	<view   class="item u-border-bottom bg_view u-m-b-1"
					@click="toChatGpt"
					hover-class="message-hover-class">
				<view style="border-radius: 10rpx;" class="u-m-r-10 u-margin-left-10">
						<u-image   width="90" height="90" border-radius="10">
							<u-image  slot="error" 
							src="https://pic4.zhimg.com/v2-645d0da7460908edf795fd38c3a57f9f_b.jpg" 
							width="90" height="90" border-radius="10"></u-image>
							<u-loading slot="loading"></u-loading>
						</u-image>
				</view>
				<view class="right  title-wrap">
					<view class="right_top">
						<view class="right_top_name u-line-1" style="font-size: 32rpx;font-weight: bold;">ChatGpt</view>
						<view class="right_top_time">{{defaultTime}}</view>
					</view>
					<view class="right_btm">
						<view class="u-line-1" style="max-width: 90%;font-size: 28rpx;">
							<text   class="u-m-r-4 u-margin-left-4">智能对话</text>
						</view>
					</view>
				</view>
			</view> -->
      <u-alert-tips show-icon type="error" title="网络异常" description="与服务器断开连接，请检查网络设置" v-if="!vuex_networkSuccess"></u-alert-tips>
			<view v-if="vuex_groupList.length>0" class="u-border-top">
				<template  v-for="(group, index) in vuex_groupList">
          <u-swipe-action :show="group.showOptionFlag"  :index="index" :key="group.group.id" 
                  btn-width="160" @click="clickOption" @open="openOption" :options="options" disabled>
            <view class="item  u-m-b-1" :class="group.group.is_multi=='SYSTEM'? ' bg_view' : 'bg_view_top'" 
                    hover-class="message-hover-class" 
                    @tap="linkToChatting(group)">
              <view style="border-radius: 10rpx;" class="u-m-r-10 u-margin-left-10">
                  <static-image :src="group.group.cover" />
                  <!-- <image :src="group.imGroup.chatGroupAvatar" style="width: 90rpx;height:90rpx;border-radius: 10rpx;"></image> -->
              </view>
              <view style="position: relative;">
                <u-badge :offset="[-56,1]"  type="error"  :is-dot="group.unread > 99" :count="group.unread"></u-badge>
              </view>
              <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
              <view class="right  title-wrap" style="border-bottom: 1rpx solid #f2f6fc;">
                <view class="right_top">
                  <view class="right_top_name " style="font-size: 33rpx;color:#000000">{{group.group.title}}</view>
                  <view v-if="group.group.id!=0" class="right_top_time">{{group.updated_at.substring(0,11)}}</view>
                  <view v-else class="right_top_time">    </view>
                </view>
                <view class="right_btm" style="padding-top: 6rpx;">
                  <view class="" style="max-width: 90%;font-size: 27rpx;">
                    <text v-if="group.unread>0" class="u-m-r-4 u-margin-left-4">[{{group.unread}}条]</text>
                    <text v-if="group.mention.length">有{{ group.mention.length }}人@提到过你</text>
                    <text v-else>{{group.last_msg?group.last_msg:'[空]'}}</text>
                  </view>
                  <view class="">
                    <u-icon v-show="group.status === 'OK'" name="/static/image/chat/pinbi.png" color="#c0c4cc" size="28"></u-icon>
                  </view>
                </view>
              </view>
            </view>
          </u-swipe-action>
				</template>
			</view>
			<view v-else>
				<view v-if="dataLoading===false" style="position: absolute;bottom: 500rpx;width: 100%;">
					<u-empty text="暂无聊天群组" mode="message"></u-empty>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import searchInput from '@/components/searchInput/index.vue';
import selectInput from '@/components/selectInput/selectInput.vue';
import config from '@/common/environment.js';
import Socket from '@/util/socket'
export default {
	components: { searchInput, selectInput},
	data() {
		return {
			plat:'',
			refresherTriggered:false,
			windowHeight:0,
			navbarTitle: config.APP_NAME,
			scrollViewHeight:0,
			socketTask:null,
			selectShow: false,
      sysGroup: null,
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						fontSize: '24rpx'
					}
				}
			],
			selectList: [
				{ id: '1', name: '发起群聊', icon: '/static/image/chat/option-1.png' },
				{ id: '2', name: '添加朋友', icon: '/static/image/chat/option-2.png' },
				// { id: '3', name: '扫一扫', icon: '/static/image/chat/option-3.png' },
				],
			dataLoading:false,
			defaultTime:"",				
		};
	},
	created:function(){
		this.defaultTime= this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
	},	
	async onLoad(){
		let plat=this.$u.os();
		console.log("当前系统是",plat);
		this.plat=plat;
		let windowHeight=this.$u.sys().windowHeight;
		this.windowHeight=windowHeight;
		this.scrollViewHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 45;
		this.refresherTriggered=false;
    await this.$u.refreshContactList()
		this.getMyChatGroupList(false, false);
    if (!Socket.getReady()) {
      Socket.initWebScoket(this)
    }
	},
	async onShow(){
    this.pageVisible = true
    if (uni.getStorageSync('contactList_refresh')) {
      uni.removeStorageSync('contactList_refresh')
      this.$u.refreshContactList()
    }
		this.getMyChatGroupList(false, false);
	},
	
	onHide(){
    this.pageVisible = false
	},
	
	onUnload(){
    this.pageVisible = false
    clearInterval(this.gpTimer)
	  // this.closeSocket();
	},
	
	methods: {
		async getMyChatGroupList(isPull, silent){
      if (this.refresherTriggered) return
      if (this.dataLoading) return
			if (!silent) this.dataLoading=true;
      if (isPull) this.refresherTriggered = true
      try {
        await this.$u.refreshChatGroupList()
      } catch (e) {
      }
      this.dataLoading=false;
      this.refresherTriggered = false
		},
		//打开或者关闭弹窗
		showSelect(){
			this.selectShow = !this.selectShow;
		},
		//action 点击事件
		clickOption(index, index1) {
      const group= this.vuex_groupList[index];
      if (group.group.created_user_id === this.vuex_userInfo.id) {
        this.globalUtil.utilAlert("你是群主，暂不能删除哦，如无需此群可进群设置进行解散!");
        return
      }
			this.$u.api.chatGroup.hiddenGroup({
				"relation_id": group.id
			}).then(res => {
				this.getMyChatGroupList();
			})
			return;	
		},
		
		//action 打开事件
		openOption(index) {
			this.vuex_groupList[index].showOptionFlag = true;
			this.vuex_groupList.map((val, idx) => {
				if (index != idx) this.vuex_groupList[idx].showOptionFlag = false;
			});
		},
		//跳转聊天窗口
		linkToChatting(groupInfo) {
      groupInfo.unread = 0
      this.$u.api.chatGroup.clearUnReadNum({"id": groupInfo.id})
      uni.navigateTo({
        url: '/pages/chat/chatGroup/chatting?chatGroupId=' + groupInfo.group_id,
        success() {
        }
      });
		},
		//关闭弹窗
		closeSelect(){
			//小程序兼容
			this.selectShow = false;
		},
		//点击选择菜单
		checkSelect(index) {
			if (index == 1) {
        this.$u.route({
          url: '/pages/chat/friends/addFriend',
					params:{}
				})
        return
			}
      if(index === 0){
        this.$u.route({
          url: '/pages/chat/chatGroup/launchChat',
          params:{type: "1"}
        })
        return
      }
      if (index == 2) {
        console.log(this.$u.sys(), 123)
        if (this.$u.sys().uniPlatform == 'web') {
          this.$u.toast('网页端不支持扫码')
          return
        }
        uni.scanCode({
          scanType: ['qrcode'],
          success: (res) => {
            console.log(res)
            try {
              const data = JSON.parse(res.result)
              if (data.id && data.account) {
                this.$u.route('/pages/chat/friends/friendHome?user_id=' + data.id)
              }
            } catch {
              this.$u.toast('二维码解析错误，请扫描平台平台二维码')
            }
          }
        })
      }

		},
		toSearch:function(){
			this.$u.route({
				url:'/pages/search/common-search'
			})
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	.item {
		width: 750rpx;
		display: flex;
		align-items: center;
		.right {
			overflow: hidden;
			flex: 1 0;
			padding: 20rpx 20rpx 26rpx 6rpx;
			&_top {
				display: flex;
				justify-content: space-between;
				&_name {
					font-size: 28rpx;
					color: $u-main-color;
					flex: 0 0 450rpx;
					overflow: hidden;
				}
				&_time {
					font-size: 22rpx;
					color: $u-light-color;
				}
			}
			&_btm {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 22rpx;
				color: $u-tips-color;
				padding-top: 10rpx;
				
			}
		}
	}
	.bg_view_top {
		background-color: #ffffff;
	}
	.bg_view {
		background-color: #ffeed4;
	}
	.hidden-scroll-bar{
		::-webkit-scrollbar{
			display: none;
			height: 0;
			width: 0;
		}
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx; 
	}
	.slot-wrap-full {
		display: flex;
		flex: 1;
		align-items: center;
		//padding: 0 30rpx; 
		text-align: center;
	}
}
</style>
<style>
	.content .u-image__error{
		background-color: #FFFFFF !important;
	}
	page{
		background-color: #f1f1f1;
	}
</style>

